<template>
  <div class="appointment-code">
    <el-card>
      <h2>预约码</h2>
      <el-alert v-if="code" :title="'您的预约码：' + code" type="success" show-icon></el-alert>
      <el-button type="primary" @click="onCopy" v-if="code">复制预约码</el-button>
      <el-button type="primary" @click="fetchCode" v-else>获取预约码</el-button>
      <el-alert v-if="msg" :title="msg" type="success" show-icon style="margin-top:10px;" />
    </el-card>
  </div>
</template>
<script>
import api from '@/api';
export default {
  data() {
    return {
      code: '',
      loading: false,
      msg: ''
    };
  },
  methods: {
    async fetchCode() {
      this.loading = true;
      try {
        const res = await api.get('/appointment/code');
        this.code = res.code;
      } catch (e) {
        this.msg = '获取预约码失败';
      }
      this.loading = false;
    },
    onCopy() {
      if (this.code) {
        navigator.clipboard.writeText(this.code);
        this.$message.success('已复制预约码');
      }
    }
  },
  created() {
    this.fetchCode();
  }
};
</script>
<style scoped>
.appointment-code { max-width: 400px; margin: 40px auto; }
</style>
